<template>
  <ContentWrap>
    <el-descriptions :column="2" border>
      <el-descriptions-item label="报销编号">
        {{ detailData.billNo }}
      </el-descriptions-item>
      <el-descriptions-item label="费用名称">
        <dict-tag :type="detailData.expenseType ?? '' " :value="detailData.expenseName ?? ''" />
      </el-descriptions-item>
      
      <el-descriptions-item label="报销部门名称">
        {{ detailData.deptName }}
      </el-descriptions-item>
      <el-descriptions-item label="报销公司">
        {{ detailData.subjectName }}
      </el-descriptions-item>

      <el-descriptions-item label="付款人">
        {{ detailData.payerName }}
      </el-descriptions-item>

      <el-descriptions-item label="费用发生日期" prop="billDate">
        {{ formatDate(detailData.billDate, 'YYYY-MM-DD') }}
      </el-descriptions-item>

      <el-descriptions-item label="费用类型">
        <dict-tag :type="DICT_TYPE.OA_EXPENSE_TYPE" :value="detailData.expenseType ?? ''" />
      </el-descriptions-item>
      <!-- <el-descriptions-item label="付款金额">
        {{ detailData.invoiceAmount }}
      </el-descriptions-item> -->
      <el-descriptions-item label="报销金额">
        {{ detailData.expenseAmount }}
      </el-descriptions-item>
      <el-descriptions-item label="有无发票">
        <el-tag :type="detailData.hasInvoice === 1 ? 'success' : 'danger'">{{ detailData.hasInvoice === 1 ? '有' : '无' }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="支付状态">
          <span v-if="detailData.payStatus === 1">已支付</span>
          <span v-else-if="detailData.payStatus === 2">已取消</span>
          <span v-else>未支付</span>
      </el-descriptions-item>
      
      <el-descriptions-item label="审批结果">
        <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="detailData.status ?? ''" />
      </el-descriptions-item>
      <el-descriptions-item label="付款日期" prop="payDate">
        <el-date-picker
          v-model="detailData.payDate"
          type="date"
          value-format="YYYY-MM-DD"
          placeholder="选择付款日期"
          style="width: 180px;"
        />
      </el-descriptions-item>
      <el-descriptions-item label="备注" :span="2">
        {{ detailData.remark }}
      </el-descriptions-item>
      <el-descriptions-item :rowspan="3" label="附件"  :span="2">
        <OaFileManager :header="false"  :initial-file-ids="detailData.files" />
      </el-descriptions-item>

    </el-descriptions>
    <!-- <el-row class="mt-20px">
      <el-col :span="24" style="text-align: center;">
        <el-button type="primary" @click="handleSavePayDate">暂存</el-button>
      </el-col>
    </el-row> -->
  </ContentWrap>
</template>
<script lang="ts" setup>
import { DICT_TYPE } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import { propTypes } from '@/utils/propTypes'
import { ExpenseApi, ExpenseVO } from '@/api/oa/expense'
import dayjs from 'dayjs'

defineOptions({ name: 'OaExpenseDetail' })

const { query } = useRoute() // 查询参数
const message = useMessage() // 消息弹窗

const props = defineProps({
  id: propTypes.number.def(undefined)
})
const detailLoading = ref(false) // 表单的加载中
const detailData = ref<any>({}) // 详情数据
const queryId = query.id as unknown as number // 从 URL 传递过来的 id 编号

/** 获得数据 */
const getInfo = async () => {
  detailLoading.value = true
  try {
    detailData.value = await ExpenseApi.getExpense(props.id || queryId)
    // 修正付款日期回显
    if (detailData.value.payDate) {
      detailData.value.payDate = dayjs(detailData.value.payDate).format('YYYY-MM-DD')
    }
  } finally {
    detailLoading.value = false
  }
}
defineExpose({ open: getInfo }) // 提供 open 方法，用于打开弹窗

/** 初始化 **/
onMounted(() => {
  getInfo()
})

const handleSavePayDate = async () => {
  detailLoading.value = true
  try {
    await ExpenseApi.updateExpense(detailData.value)
    message.success('保存成功')
  } finally {
    detailLoading.value = false
  }
}
</script>
